<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>登录</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords"
	content="Flatro Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<link href="css/bootstrap.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Custom Theme files -->
<link href="css/style.css" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<!--webfont-->
<link href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<link
	href='http://fonts.useso.com/css?family=Lato:100,200,300,400,500,600,700,800,900'
	rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- start menu -->
<link href="css/megamenu.css" rel="stylesheet" type="text/css"
	media="all" />
<script type="text/javascript" src="js/megamenu.js"></script>
<script>$(document).ready(function(){$(".megamenu").megamenu();});</script>
<script>
$(document).ready(function(c) {
	$('.alert-close1').on('click', function(c){
		$('.message1').fadeOut('slow', function(c){
	  		$('.message1').remove();
		});
	});	  
});
</script>
<script type="text/javascript">
var code  //在全局 定义验证码 
function createCode(){ 
		code = "";  
		var codeLength = 4;//验证码的长度  
		var checkCode = document.getElementById("canvas");
		checkCode.value = ""; 
		var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');
		  for(var i=0;i<codeLength;i++) 
		    {  
			  var charIndex = Math.floor(Math.random()*32);   
			  code +=selectChar[charIndex];
		    }
		  if(code.length != codeLength)
		    {    
			  createCode(); 
		    }
		checkCode.value = code; 
}
//canvas创建

function draw(id)
{
	var canvas=document.getElementById(id);
	var a,b,c,color;
	var d=-10;
	if(canvas==null)
	return false;
	var context=canvas.getContext("2d");
	createCode();//调用函数生成验证码
	context.fillStyle="#eeffff";   //填充颜色，背景颜色
	context.fillRect(0,0,100,35);//画矩形
	for(i=0;i<4;i++)//通过循环实现各个字体颜色和格式设置
	{ 
		a = Math.floor(Math.random()*256);
		b = Math.floor(Math.random()*256);
		c = Math.floor(Math.random()*256);
		d = d + 20;//设置文字坐标，左上角为坐标原点
		color = "rgb(" + ''+ a +","+ b +"," + c +")";//拼接字符串,"rgb(a,b,c)";
	    context.fillStyle=color;     //字体颜色  "rgb(a,b,c)";
	    context.strokeStyle=color;   //字体阴影颜色
	    context.font="italic 23px sans-serif"; //字体样式设置 样式和大小
	    context.textBaseline="top";     //对齐方式
	    context.fillText(code[i],d,10);//填充字符创
	    context.strokeText(code[i],d,10);//轮廓字符串
    }
}

//验证方法，登录时调用
function validate () 
{  
	var inputCode = document.getElementById("input").value.toUpperCase(); //中间名字为输入验证码框的id
	if(inputCode.length <=0)
		{    
		alert("请输入验证码！"); 
       return false; }  
   if(inputCode != code )
		{    
		alert("验证码输入错误！"); 
		
	//createCode(); 
		 draw('canvas');
		 return false
	}     
		 var getName=document.getElementById("name").value;
		 var getPwd=document.getElementById("pwd").value;
	 if(getName ==""){
			 document.getElementById("nameValid").innerHTML="请输入姓名！";
			 return false;
		 }
	 if(getPwd==""){
			 document.getElementById("pwdValid").innerHTML="请输入密码！";
			 return false;
		 }
	 else{
		$("#formLogin").attr("action", "UserLogin").submit(); 
		return true;
	
		 }
} 	

	function resetPwd(){
		var pwd1=document.getElementById("resetPassword1").value;
		var pwd2=document.getElementById("resetPassword2").value;
		if(pwd1!=pwd2){
			document.getElementById("testpwd").innerHTML="密码输入有误请重新输入";
			return false;
		}
		else{
			$("#resetPwd").attr("action", "resetPwd").submit(); //有待进一步了解
			return true;
		}
		
	}
</script>

<style type="text/css">
	.spanColor{
		color: red;
	}
</style>
</head>
<body onload="draw('canvas')">
<!-- 	  <div class="header_top">
	<div class="container">
         <div class="cssmenu">
			 <ul>
			   <li class="active"><a href="#">购物车</a></li> 
			</ul>
			<p>如果你点了我，我就消失！</p>
		 </div>
	</div>
</div>	-->
	<div class="header_bottom men_border">
		<div class="container">
			<div class="col-xs-9 header-bottom-left">
				<div class="col-xs-2 logo">
					<h1>
						<a href="index.html"><span>登</span>录</a>
					</h1>
				</div>
				<div class="col-xs-7 menu">
					<ul class="megamenu skyblue">
						<li class="active grid"><a class="color1" href="Index.jsp">主页</a>
						<li class="grid"><a class="color2" href="#">女装</a></li>
						<li><a class="color4" href="about.html">购物车</a></li>
						<li><a class="color5" href="404.html">备注</a></li>
						<li><a class="color6" href="contact.html">其他</a></li>
					</ul>
				</div>
			</div>

			<div class="search">
				<input type="text" name="s" class="textbox" value="Search"
					onfocus="this.value = '';"
					onblur="if (this.value == '') {this.value = 'Search';}"> <input
					type="submit" value="Subscribe" id="submit" name="submit">
				<div id="response"></div>
			</div>
			<div class="clearfix"></div>
		</div>
		<div class="clearfix"></div>
	</div>
	</div>
	<div class="single_top">
		<div class="container">
			<div class="register">
				<div class="col-md-6 login-right">
					<h3>用户登录</h3>
					<p>如果你有账号，请登录！</p>
					<!-- 
				登陆表单
				 -->
					<form action=" " method="post" id="formLogin" onsubmit="return validate ();">
						<div>
							<span>用户类型<label>*</label></span>
						            买家<input type="radio" name="loginUser" checked="checked" value="buyer"> 
							管理员<input type="radio" name="loginUser" value="manager"> 
							卖家<input type="radio" name="loginUser" value="seller">
						</div>
						<div>
							<span>账号<label>*</label></span> <input type="text" name="name" id="name">
							<span id="nameValid" name="spanColor"></span>
						</div>
						<div>
							<span>密码<label>*</label></span> <input type="text" name="pwd" id="pwd">
							<span id="pwdValid"name="spanColor"></span>
						</div>
						<a data-toggle="modal" data-target="#myModalRegister">忘记密码</a>

						<div class="col-md-12">
							<div class="testbox control-wrapper">
								<div class="verifyimg">
									<canvas id="canvas" width="100px" height="40px"> </canvas>
									<div class="yz">
										<a id="" href="javascript:draw('canvas')">看不清</a>
									</div>
									<!-- canvas 可以修改大小 -->
									<!-- <img src="#" height="40" width="215">  -->
									<!-- 更换验证码 -->
								</div>
								<label> <input type="text" class="form-control"
									id="input" name="verify" placeholder="验证码">
								</label>
							</div>
						</div>
						<div>
							<input type="submit" value="登录" onclick="submitForm();">
						</div>
					</form>
				</div>
				<div class="col-md-6 login-left">
					<h3>新用户</h3>
					<p>注册新用户</p>
					<a class="acount-btn" href="regist.jsp">注册</a>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!-- 重置密码模态框（Modal） -->
	<div class="modal fade" id="myModalRegister" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">更改密码</h4>
				</div>
				<div class="modal-body">
		<!--  更改密码模态框开始-->
					<form class="templatemo-container" role="form" action=" "
						method="post" id="resetPwd" onsubmit="return resetPwd();">
						<div>
							<span>用户类型<label>*</label></span>
						            买家<input type="radio" name="forgetPwd" checked="checked" value="buyer"> 
							管理员<input type="radio" name="forgetPwd" value="manager"> 
							卖家<input type="radio" name="forgetPwd" value="seller">
						</div>
						<div class="form-group">
							<div class="col-xs-12">
								<div class="control-wrapper">
									<label for="username" class="control-label fa-label">
									<i class="fa fa-user fa-medium"></i></label> 
									<input type="text"class="form-control" name="updateName" placeholder="用户名">
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-12">
								<div class="control-wrapper">
									<label for="password" class="control-label fa-label"><i
										class="fa fa-lock fa-medium"></i></label> 										
										<input type="text" class="form-control" name="resetPassword1" id="resetPassword1" placeholder="新置密码">
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-12">
								<div class="control-wrapper">
									<label for="password" class="control-label fa-label">
									<i class="fa fa-lock fa-medium"></i></label>
									 <input type="text" class="form-control" name="resetPassword2" id="resetPassword2" placeholder="确认密码">					 
									<label id="testpwd"></label>
								</div>
							</div>
						</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
					<button type="submit" class="btn btn-primary">提交</button>
					</form>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 上边是重置密码模态框（Modal） -->
</body>
</html>
